<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./style.css" />
    <title>埋点</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      var app = new Vue({
        el: "#app",
        template: `
          <div>
            <header class="header">
              <div>
                <input v-if="edit" v-model="user"/><span v-else>{{user}}</span>
                </div>
                <span @click="changeUser">{{edit ? '登录': '切换账号'}}</span>
              </header>
            <div class="message" :class="{active: message !== ''}" v-html="message"></div>
            <div class="filter">
              <div>
                <span
                v-for="btn in btns"
                class="category"
                :class="{active: categroyIndex === btn}"
                @click="selectCategroy(btn)"
              >{{btn}}</span>
                </div>
            </div>  
            <h2 style="text-align: center; padding-top: 30px;font-size: 32px; font-weight: 700; line-height: 38px;">
              You aren’t following anyone yet
              </h2>
            <p style="text-align: center;margin: 0;margin-bottom: 48px;">
              <span style="color: #ea4c89;cursor: pointer;" class="find" @click="find">Find Friends</span>
              you already know from Twitter.
              </p>
            <h5 style="text-align: center;margin: 0;font-size: 16px; font-weight: 700;">
              Check out some of today’s popular shots
              </h5>
            <div class="list">
              <div
                v-for="(item, index) in list"
                :key="index"
                class="list-item"
              >
                <div @click="imgClick(item)" class="banner">
                  <img :src="item.img" />
                  </div>
                <div style="display: flex; justify-content: space-between;margin: 0 auto; width: 300px;">
                  <div style="display: flex; align-items: center;"><img style="padding-right: 10px;width: 24px;" src="./images/avatar.png"/>{{item.name}}</div>
                  <div style="display: flex; align-items: center;">
                    <span  @click="likeClick(item)" style="display: inline-block; height: 24px;"><svg :style="{color: item.isLike ? 'rgb(234, 76, 137)' : '#9e9ea7'}" style="cursor:pointer;padding-right: 4px;width: 14px; fill: currentColor;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" role="img" class="icon fill-current shot-tools-icon"><path d="m18.199 2.04c-2.606-.284-4.262.961-6.199 3.008-2.045-2.047-3.593-3.292-6.199-3.008-3.544.388-6.321 4.43-5.718 7.96.966 5.659 5.944 9 11.917 12 5.973-3 10.951-6.341 11.917-12 .603-3.53-2.174-7.572-5.718-7.96z"></path></svg></span><span style="color: #3d3d4e; font-size: 12px;">{{item.like}}</span>
                    <svg style="padding-left: 10px; padding-right: 4px;width: 14px; height: 14px; color: #9e9ea7; fill: currentColor;" xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none" role="img" class="icon fill-current shot-tools-icon">
<path d="M7 3.45833C5.87242 3.45833 4.95833 4.37242 4.95833 5.5C4.95833 6.62758 5.87242 7.54167 7 7.54167C8.12758 7.54167 9.04167 6.62758 9.04167 5.5C9.04167 4.37242 8.12758 3.45833 7 3.45833ZM7 0.25C3.13425 0.25 0 4.625 0 5.5C0 6.375 3.13425 10.75 7 10.75C10.8657 10.75 14 6.375 14 5.5C14 4.625 10.8657 0.25 7 0.25ZM7 8.70833C5.22783 8.70833 3.79167 7.27217 3.79167 5.5C3.79167 3.72783 5.22783 2.29167 7 2.29167C8.77217 2.29167 10.2083 3.72783 10.2083 5.5C10.2083 7.27217 8.77217 8.70833 7 8.70833Z"></path>
</svg><span style="color: #3d3d4e; font-size: 12px;">{{item.see}}</span>
                    </div>
                  </div>
              </div>
              </div>
          </div>
        `,
        data: {
          user: "user01",
          edit: false,
          message: "",
          categroyIndex: "发现",
          btns: [
            "发现",
            "动画",
            "品牌创建",
            "插图",
            "移动",
            "打印",
            "产品设计",
            "印刷",
            "网页设计",
          ],
          list: [
            {
              name: "RonDesignLab",
              like: "124",
              see: "16.7k",
              img: "./images/img1.png",
              isLike: false,
            },
            {
              name: "Ofspace LLC",
              like: "65",
              see: "9.9k",
              img: "./images/img2.png",
              isLike: false,
            },
            {
              name: "Craftwork",
              like: "45",
              see: "2.2k",
              img: "./images/img3.png",
              isLike: false,
            },
            {
              name: "Musemind",
              like: "99",
              see: "13.7k",
              img: "./images/img4.png",
              isLike: false,
            },
          ],
        },
        methods: {
          // 切换用户
          changeUser() {
            this.edit = !this.edit;
          },
          setMessage(str) {
            this.message = str;
            if (this.timer) {
              clearTimeout(this.timer);
              this.timer = null;
            }
            this.timer = setTimeout(() => {
              this.message = "";
            }, 2000);
          },
          // 点击菜单
          selectCategroy(btn) {
            this.categroyIndex = btn;
            this.setMessage(
              `您点击了<span style="color: rgb(234, 76, 137);padding: 0 4px;">${btn}</span>菜单`
            );
          },
          // 点击图片
          imgClick(item) {
            // this.setMessage(
            //   `您点击了${item.name}的<span style="color: rgb(234, 76, 137);padding: 0 4px;">作品</span>`
            // );
            sessionStorage.setItem("product", JSON.stringify(item));
            location.href = "./detail.html";
          },
          // 点赞
          likeClick(item) {
            item.isLike = !item.isLike;
            this.list = this.list.filter((item) => true);
            this.setMessage(
              item.isLike
                ? `您给${item.name}点了个<span style="color: rgb(234, 76, 137);padding: 0 4px;">赞</span>`
                : `您给${item.name}<span style="color: rgb(234, 76, 137);padding: 0 4px;">取消了点赞</span>`
            );
          },
          // 点击文字
          find() {
            this.setMessage(
              '您点击了<span style="color: rgb(234, 76, 137);padding: 0 4px;">Find Friends</span>'
            );
          },
        },
      });
    </script>
  </body>
</html>
